<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/ol.css">
    <script src="js/ol-debug.js"></script>
    <script src="lib/jquery/jquery-3.3.1.min.js"></script>
    <script src="lib/echart/echarts.min.js"></script>

</head>
<body>
<div id="map" style="width: 100%"></div>
<script>
    var format = 'image/png';
    //view
    var view=new ol.View({
        // 设置成都为地图中心
        center: ol.proj.transform([110,39],"EPSG:4326","EPSG:3857"),
        zoom: 4
    });

    var vectorSource = new ol.source.Vector({
        url:"json/b.geojson",
        format:new ol.format.GeoJSON()
    });

    //////////////////////
/*    $.ajax({
        type: "GET",
        //url: "http://localhost:8080/geoserver/xcy/wfs?service=WFS&request=GetFeature&version=1.1.0&typename=xcy:polygon&outputFormat=json&CQL_FILTER=EntityHand='7E25'",
        //属性查询
        //url: "http://localhost:8080/geoserver/xcy/wfs?service=WFS&request=GetFeature&version=1.1.0&typename=xcy:polygon&outputFormat=json&PROPERTYNAME=Layer&FEATUREID=polygon.2",
        //空间查询
        url: "json/a.geojson" ,

        dataType:'json',
        success: function(data){
            var vectorSource = new ol.source.Vector({
                url:"json/a.geojson",
                format:new ol.format.GeoJSON()
            });
            var vectorLayer = new ol.layer.Vector({
                source: vectorSource,
                style: styleFunction
            });
            map.addLayer(vectorLayer);


        }

    });*/

/*    var vectorSource = new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
    });*/

    var style = new ol.style.Style({
        fill: new ol.style.Fill({ //矢量图层填充颜色，以及透明度
            color: 'rgba(255, 255, 255, 0.8)'
        }),
        stroke: new ol.style.Stroke({ //边界样式
            color: '#319FD3',
            width: 1
        }),
        text: new ol.style.Text({ //文本样式
            font: '12px Calibri,sans-serif',
            fill: new ol.style.Fill({
                color: '#000'
            }),
            stroke: new ol.style.Stroke({
                color: '#fff',
                width: 3
            })
        })
    });


    function  styleFunction(feature) {

        var _name=feature.get("NAME");
        _name=map.getView().getZoom()>4?_name:"";
        return  new ol.style.Style({
            fill: new ol.style.Fill({ //矢量图层填充颜色，以及透明度
                color: 'rgba(255, 255, 255, 0.8)'
            }),
            stroke: new ol.style.Stroke({ //边界样式
                color: '#319FD3',
                width: 1
            }),
            text: new ol.style.Text({ //文本样式
                text:_name,
                font: '12px Calibri,sans-serif',
                fill: new ol.style.Fill({
                    color: '#000'
                }),
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 3
                }),
                textAlign:"left",
                offsetX:"0"
            })
        });
    }

    ///////////////////////
    var fill = new ol.style.Fill({
        color: '#dd942e'
    });
    var stroke = new ol.style.Stroke({
        color: '#cc1000',
        width: 1.25
    });
    var stylePolygon = [
        new ol.style.Style({
            image: new ol.style.Circle({
                fill: new ol.style.Fill({
                    color: 'rgba(255,0,255,0.4)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#cc3540',
                    width: 1.25
                }),
                radius: 5
            }),
            fill: fill,
            stroke: stroke
        })
    ];
    //var polygon_org=[[[120,40],[122,50],[111,45]]];
    var polygon_org=[
        [[120,40],[122,50],[111,45]],
        [[119,40],[121,50],[110,45]]
    ];
    //var geomPolygon=new ol.geom.Polygon(polygon_org);
/*    var polygon_org=[
        [
            [[120,40],[122,50],[111,45]],
            [[119,41],[121,49],[112,45]]
        ]
    ];*/
    var polygon_org=[
        [
            [[120,40],[122,50],[111,45]]
        ],
        [
            [[119,41],[121,49],[112,45]]
        ]
    ];
    var geomPolygon=new ol.geom.MultiPolygon(polygon_org);
    geomPolygon.transform("EPSG:4326","EPSG:3857");
    var featurepolygon= new ol.Feature({
        geometry:geomPolygon
    });
    var polygonVectorSource = new ol.source.Vector({
        features:[featurepolygon]
    });
    var polygonVectorLayer = new ol.layer.Vector({
        title:"面",
        source: polygonVectorSource,
        //style: styleFunction,
        style:stylePolygon,
        renderMode:'image'
    });

    ////////////////////////////////////////
    // map
    var map = new ol.Map({
        layers: [
            getTdtLayer("vec_w"),
            getTdtLayer("cva_w")
        ],
        view:view,
        target: 'map'
    });
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: styleFunction
    });
    map.addLayer(vectorLayer);
    map.addLayer(polygonVectorLayer);

    function getTdtLayer(lyr) {
        var urls=[];
        for(var i=0;i<8;i++)
        {
            urls.push( "http://t"+i+".tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}&tk=07c3369864c03fb6a162ac560811db9b")
        }
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                urls:urls
            })
        });
        return layer;
    }
</script>
</body>
</html>
